<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="~{/common/common :: common_head('学生登录页面')}"></head>
<head>
    <link rel="stylesheet" th:href="@{/css/front/learner-login.css}">
</head>
<body>
<!-- 引入公共的导航部分 -->
<header th:include="~{/common/common :: common_header('','学生登录页面')}"></header>

<article>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6 left"></div>
            <!-- 右边表格部分 -->
            <div class="layui-col-md6 right">
                <div class="layui-card">
                    <div class="layui-card-header">学生登录</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户账户</label>
                                <div class="layui-input-block">
                                    <input type="text" name="userAccount" required  lay-verify="required" placeholder="请输入用户账户" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户密码</label>
                                <div class="layui-input-block">
                                    <input type="password" name="password" required  lay-verify="required" placeholder="请输入用户密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="login">立即登录</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">注册</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
</body>
</html>
<script>
    layui.use('form', function(){
        let form = layui.form;
        let $ = layui.$; //获取jQuery对象
        //监听提交
        form.on('submit(login)', function(data){
            // layer.msg(JSON.stringify(data.field));
            $.ajax({
                url: '/user/login',
                method: 'post',
                data: data.field,
                dataType: 'JSON',
                success: function (res){
                    //正确
                    if (res == 0){
                        //登录成功
                        layer.msg('登录成功',{
                            time: 500, // 0.5秒钟跳转到首页
                        },function (){
                            //跳转到首页
                            window.location = '/page/frontIndex';
                        })
                    };
                    //密码错误
                    if (res == 1){
                        //密码错误
                        layer.msg("密码错误",{
                            time: 20000 , //如果20s后 没有操作，自动关闭
                            btn: ["我知道了"],
                            btnAlign: 'c',
                            shade: 0.5,
                            anim: 6,
                            yes: function (index, layero){
                                //关闭弹框
                                layer.close(index);
                            }
                        })
                    };
                    //用户名不存在
                    if (res == 2){
                        //密码错误
                        layer.msg("用户名不存在",{
                            time: 20000 , //如果20s后 没有操作，自动关闭
                            btn: ["我知道了"],
                            btnAlign: 'c',
                            shade: 0.5,
                            anim: 6,
                            yes: function (index, layero){
                                //关闭弹框
                                layer.close(index);
                            }
                        })
                    };
                }
            })
            return false;
        });
    });
</script>